import * as echarts from "echarts";
import { fontSize } from "@/utils/px2rem.js";
// const fontSize = (res) => {
//   const clientWidth =
//     window.innerWidth ||
//     document.documentElement.clientWidth ||
//     document.body.clientWidth;
//   if (!clientWidth) return;
//   const fontSize = clientWidth / 1920;
//   return res * fontSize;
// };

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function formatNumber(num) {
  return new Intl.NumberFormat().format(num);
}

export const options = {
  AgeProportion(props) {
    for (let key in props) {
      props[key] = props[key].replace(/%/g, '') / 100;
    }
    const data = [
      { name: "20岁", value: props.under_twenty },
      { name: "20～29岁", value: props.between_twenty_twentynine },
      { name: "30～39岁", value: props.between_thirty_thirtynine },
      { name: "40～49岁", value: props.between_forty_fortynine },
      { name: "50～59岁", value: props.between_fifty_fiftynine },
      { name: "60+岁", value: props.over_sixty },
    ];
    const options = {

      color: ["#FFA3C8", "#FD6EA9", "#F93C94", "#7675E0", "#879FFF", "#5A64FF"],
      legend: {
        orient: "vertical",
        icon: "circle",
        right: "5%",
        y: "center",
        itemWidth: fontSize(6),
        itemHeight: fontSize(6),
        itemGap: fontSize(12),
        align: "left",
        textStyle: {
          rich: {
            name: {
              fontSize: fontSize(14),
              color: "#fff",
            },
            value: {
              fontSize: fontSize(14),
              padding: [0, fontSize(5), 0, fontSize(5)],
              color: "#fff",
            },
          },
        },
        formatter: function (name) {
          let value = 0;
          data.forEach((item) => {
            if (item.name == name) {
              value = item.value;
            }
          });
          return "{name|" + name + "：}" + "{value|" + (value * 100).toFixed(2) + "%}";
        },
      },
      series: [
        {
          name: "当事人年龄占比",
          type: "pie",
          radius: ["50%", "72%"],
          center: ["22%", "56%"],
          label: { show: false },
          labelLine: { show: false },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          data: data,
        },
        {
          //  内边框
          radius: ["30%", "30%"],
          center: ["22%", "56%"],
          silent: true,
          type: "pie",
          label: { show: false },
          labelLine: { show: false },
          animation: false,
          tooltip: {
            show: false,
          },
          data: [
            {
              value: 1,
              itemStyle: {
                borderColor: "#1F3368",
                borderWidth: 1,
              },
            },
          ],
        },
        {
          // 外边框
          center: ["22%", "56%"],
          radius: ["52%", "86%"],
          silent: true,
          type: "pie",
          zlevel: -1,
          label: { show: false },
          labelLine: { show: false },
          animation: false,
          tooltip: {
            show: false,
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: "rgba(16, 23, 59, 0.75)",
              },
            },
          ],
        },
      ],
    };
    return options;
  },

  //用户地理分布Top5
  MapDistribution(yhfbData) {
    let imgList = [
      "image/top1@3x.png",
      "image/top2@3x.png",
      "image/top3@3x.png",
      "image/top4@3x.png",
      "image/top5@3x.png",
    ];
    let icon =
      "image://";
    let colorList = [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#431E0D",
          },
          {
            offset: 1,
            color: "#FF9F53",
          },
        ],
        global: false,
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#37071B",
          },
          {
            offset: 1,
            color: "#FD6EA9",
          },
        ],
        global: false,
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#023164",
          },
          {
            offset: 1,
            color: "#5572E8",
          },
        ],
        global: false,
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#2E3133",
          },
          {
            offset: 1,
            color: "#DADFF5",
          },
        ],
        global: false,
      },
    ];
    let data = {
      x: yhfbData.map(item => item.sf),
      y: yhfbData.map(item => item.num),
    };
    const options = {
      grid: {
        top: fontSize(2),
        bottom: 0,
        left: fontSize(2),
        right: fontSize(2),
        containLabel: true,
      },
      xAxis: {
        show: false, //是否显示x轴
        type: "value",
      },
      yAxis: [
        {
          type: "category",
          inverse: true, //让y轴数据逆向
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: fontSize(14),
            },
            formatter: function (params, index) {
              return `{img${index + 1}|}  ${params}`;
            },
            rich: {
              img1: {
                width: fontSize(54),
                height: fontSize(22),
                backgroundColor: {
                  image: imgList[0],
                },
              },
              img2: {
                width: fontSize(54),
                height: fontSize(22),
                backgroundColor: {
                  image: imgList[1],
                },
              },
              img3: {
                width: fontSize(54),
                height: fontSize(22),
                backgroundColor: {
                  image: imgList[2],
                },
              },
              img4: {
                width: fontSize(54),
                height: fontSize(22),
                backgroundColor: {
                  image: imgList[3],
                },
              },
              img5: {
                width: fontSize(54),
                height: fontSize(22),
                backgroundColor: {
                  image: imgList[4],
                },
              },
            },
          },
          splitLine: { show: false }, //横向的线
          axisTick: { show: false }, //y轴的端点
          axisLine: { show: false }, //y轴的线
          data: yhfbData.map(item => item.sf),
        },
        {
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: fontSize(14),
            },
            formatter: function (value) {
              return formatNumber(value) + "人";
            },
          },
          data: data.y,
        },
      ],
      series: [
        {
          name: "用户数",
          type: "bar",
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: function (params) {
                if (params.dataIndex <= 2) {
                  return colorList[params.dataIndex];
                } else {
                  return colorList[3];
                }
              },
            },
          },
          barCategoryGap: "100%",
          barWidth: 4,
          data: data.y,
        },
        {
          data: data.y,
          type: "pictorialBar",
          barMaxWidth: 20,
          symbol: icon,
          symbolPosition: "end",
          barCategoryGap: "50%",
          symbolOffset: [fontSize(8), 0],
          symbolSize: [fontSize(16), fontSize(16)],
          zlevel: 2,
          silent: true,
        },
        {
          name: "背景",
          type: "bar",
          itemStyle: {
            normal: {
              color: "#393F46",
            },
          },
          barGap: "-50%",
          z: 0,
          barWidth: 1,
          data: new Array(data.y.length).fill(Math.max(...data.y))
        },
      ],
    };
    return options;
  },

  // 申请立案时间分布
  ApplyTimeOptions(laTimeData) {
    let data = {
      x: laTimeData.map(item => item.sj),
      y: laTimeData.map(item => item.las)
    };

    const options = {
      legend: {
        show: false,
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "RGBA(22, 39, 82, 0.8)",
        borderColor: "RGBA(83, 106, 175, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
      },
      grid: {
        top: fontSize(40),
        bottom: 0,
        left: fontSize(8),
        right: fontSize(2),
        containLabel: true,
      },
      xAxis: {
        type: "category",
        nameTextStyle: {
          fontSize: fontSize(13),
          color: "#D0DEEE",
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#6487A9",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#D0DEEE", //更改坐标轴文字颜色
          },
        },
        data: data.x,
      },
      yAxis: {
        name: "(件)",
        nameTextStyle: {
          fontSize: fontSize(12),
          color: "#D0DEEE",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: fontSize(13),
            color: "#D0DEEE",
            padding: [0, fontSize(8), 0, 0],
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(108, 128, 151, 0.3)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "立案数",
          type: "line",
          smooth: true,
          symbolSize: 0,
          itemStyle: {
            color: "#FF9F53",
            borderColor: "#47ade34f",
            borderWidth: 10,
            shadowColor: "#346a78",
            shadowBlur: 5,
            shadowOffsetY: 1,
            shadowOffsetX: 1,
          },

          tooltip: {
            show: true,
          },
          areaStyle: {
            opacity: 0.8,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(255, 159, 83, 0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(255, 159, 83, 0.05)",
                },
              ],
              global: false, // 缺省为 false
            },
          },
          emphasis: {
            focus: "series",
          },
          data: data.y,
        },
      ],
    };
    return options;
  },

  //在线立案率
  OnlineLianFa(data) {
    let anchorUrl_pink =
      "image://";
    let pointerUrl_pink =
      "image://";
    let anchorUrl_blue =
      "image://";
    let pointerUrl_blue =
      "image://";
    const options = {
      color: data.color,
      title: {
        bottom: fontSize(16),
        left: "center",
        text: `{a| ${data.name} }  {b|${data.value}} {a|%}`,
        textStyle: {
          color: "#fff",
          rich: {
            a: {
              color: "#D0DEEE",
              fontSize: fontSize(14),
              padding: [fontSize(10), 0, 0, 0],
            },
            b: {
              color: "#fff",
              fontFamily: "douyuFont",
              fontSize: fontSize(16),
            },
          },
        },
      },
      series: [
        {
          name: "刻度",
          type: "gauge",
          center: ["50%", "70%"],
          radius: "62%",
          min: 0, //最小刻度
          max: 100, //最大刻度
          splitNumber: 5, //刻度数量
          startAngle: 180,
          endAngle: 0,
          zlevel: 2,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [[1, "rgba(0,0,0,0)"]],
            },
          },
          axisLabel: {
            show: true,
            color: "#C3D1E1",
            fontSize: fontSize(12),
            distance: -fontSize(16),
            formatter: function (v) {
              return v;
            },
          }, //刻度标签。
          axisTick: {
            show: false,
          }, //刻度样式
          splitLine: {
            show: true,
            length: -fontSize(30),
            lineStyle: {
              color: "#D0DEEE",
              width: 1,
            },
          }, //分隔线样式
        },
        {
          type: "gauge",
          radius: "76%",
          center: ["50%", "70%"],
          splitNumber: 0, //刻度数量
          startAngle: 180,
          endAngle: 0,
          zlevel: 1,
          axisLine: {
            show: true,
            lineStyle: {
              width: fontSize(24),
              color: [[1, data.color]],
            },
          },
          splitLine: {
            show: false,
          },
          //分隔线样式。
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          pointer: {
            show: true,
            length: fontSize(60),
            width: fontSize(14),
            icon: data.type == "blue" ? pointerUrl_blue : pointerUrl_pink,
            offsetCenter: [0, fontSize(5)],
          },
          anchor: {
            show: true,
            showAbove: true,
            size: fontSize(30),
            icon: data.type == "blue" ? anchorUrl_blue : anchorUrl_pink,
          },
          title: {
            show: false,
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: data.value,
            },
          ],
        },
      ],
    };
    return options;
  },
};
